{% extends "base.html" %}

{% set active_page = "Info" %}

{% block head %}
    <script type="text/javascript" src="{{ url_for('static', filename='js/system_health.js') }}"></script>
    <script>
        setInterval(updateSystemHealth, 5000);
        updateSystemHealth();
    </script>
    <style>
        .progress {
            color: white;
            background-color: darkgray;
        }
    </style>
{% endblock %}

{% macro icon_tooltip_desk(icon, tooltip, icon_class=None) %}
    {% set icon_class = icon_class if icon_class else 'fas' %}
    <td class="align-middle text-center" style="width: 30px;" data-toggle="tooltip" data-placement="bottom" title="{{ tooltip }}">
        <i class="{{ icon_class }} fa-{{ icon }}"></i>
    </td>
{% endmacro %}

{% macro component_card(component) %}
    <div class="card m-2" style="width: 430px;">
        <div class="card-body">
            <h5 class="card-title">{{ component }} status</h5>
            <h6 class="card-subtitle mb-2" id="{{ component }}-status">
                unknown
            </h6>
            <table class="table table-borderless table-sm mb-0">
                <tr>
                    {{ icon_tooltip_desk('linux', 'Operating system', icon_class='fab') }}
                    <td id="{{ component }}-os"></td>
                    {{ icon_tooltip_desk('python', 'Python version', icon_class='fab') }}
                    <td id="{{ component }}-python"></td>
                    {{ icon_tooltip_desk('code-branch', 'FACT version') }}
                    <td id="{{ component }}-version"></td>
                </tr>
                <tr>
                    {{ icon_tooltip_desk('microchip', 'CPU status') }}
                    <td colspan="5" id="{{ component }}-cpu"></td>
                </tr>
                <tr>
                    {{ icon_tooltip_desk('memory', 'Memory status') }}
                    <td colspan="5" class="align-middle">
                        <div class="progress position-relative" style="height: 20px;" id="{{ component }}-memory"></div>
                    </td>
                </tr>
                <tr>
                    {{ icon_tooltip_desk('hdd', 'Disk status') }}
                    <td colspan="5" class="align-middle">
                        <div class="progress position-relative" style="height: 20px;" id="{{ component }}-disk"></div>
                    </td>
                </tr>
                {% if component == "backend" %}
                    <tr>
                        {{ icon_tooltip_desk('box-open', 'Pending items for extraction') }}
                        <td colspan="4" id="backend-unpacking-queue"></td>
                        <td class="text-danger text-center" id="backend-unpacking-throttle-indicator" data-toggle="tooltip" data-placement="bottom"
                            title="Pause indicates that unpacking is halted until analysis queue is under throttle limit again."></td>
                    </tr>
                    <tr>
                        {{ icon_tooltip_desk('microscope', 'Pending items for analysis') }}
                        <td colspan="5" id="backend-analysis-queue"></td>
                    </tr>
                {% endif %}
            </table>
       </div>
    </div>
{% endmacro %}

{% macro plugin_card(plugin_name) %}
    {% set description, _, __, version, dependencies, blacklist, whitelist, threads = analysis_plugin_info[plugin_name] %}
    <div class="card m-2" style="width: 430px;">
        <div class="card-body">
            <h5 class="card-title">{{ plugin_name }}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{{ version }}</h6>
            <table class="table table-borderless">
                <tr>
                    {{ icon_tooltip_desk('align-justify', 'Concurrent threads') }}
                    <td style="width: 46px;">{{ threads }}</td>

                    <td style="width: 30px;" data-toggle="tooltip" data-placement="bottom" title="Currently processing">
                        <i class="fas fa-cog" style="color: darkgrey" id="{{ plugin_name }}-active-indicator"></i>
                    </td>
                    <td style="width: 46px;" id="{{ plugin_name }}-active"></td>

                    <td style="width: 20px;" data-toggle="tooltip" data-placement="bottom" title="Pending tasks">
                        <i class="fas fa-sign-in-alt" style="color: darkgrey" id="{{ plugin_name }}-queue-indicator"></i>
                    </td>
                    <td id="{{ plugin_name }}-queue"></td>

                    <td style="width: 20px;" data-toggle="tooltip" data-placement="bottom" title="Finished tasks ready for collection">
                        <i class="fas fa-sign-out-alt" style="color: darkgrey" id="{{ plugin_name }}-out-queue-indicator"></i>
                    </td>
                    <td id="{{ plugin_name }}-out-queue"></td>
                </tr>
            </table>

            <div class="collapse m-0 p-0 mt-3" id="{{ plugin_name }}">
                <span class="card-text">
                    {{ description }}
                </span>
                <table class="table table-borderless mb-0 table-sm">
                    <tr>
                        {{ icon_tooltip_desk('project-diagram', 'Plugin dependencies') }}
                        <td>{{ dependencies | list_group_collapse | safe}}</td>
                    </tr>
                    <tr>
                        {{ icon_tooltip_desk('flag', 'Blacklisted file types') }}
                        <td>{{ blacklist | list_group_collapse | safe }}</td>
                    </tr>
                    <tr>
                        {{ icon_tooltip_desk('flag', 'Whitelisted file types', icon_class='far') }}
                        <td>{{ whitelist | list_group_collapse | safe }}</td>
                    </tr>
                    <tr>
                        {{ icon_tooltip_desk('chart-bar', 'Analysis stats', icon_class='far') }}
                        <td id="{{ plugin_name }}-stats"></td>
                    </tr>

                </table>
            </div>

            {% set button_id = "bt-" + plugin_name %}
            <button class="btn btn-outline-secondary btn-sm btn-block mt-3" data-toggle="collapse" data-target="#{{ plugin_name }}" onclick="change_button('{{ button_id }}')">
                <i id="{{ button_id }}" class="fas fa-caret-down"></i>
            </button>

        </div>
    </div>
{% endmacro %}

{% block body %}

<div class="row justify-content-center mt-4">
    {% for component in ["frontend", "backend" ,"database"] %}
        {{ component_card(component) }}
    {% endfor %}
</div>

<!-- Current Analyses -->
<div class="row justify-content-center">
    <div class="card m-2" style="width: 430px;">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center" style="width: 100%">
                <h5 class="card-title">Currently analyzed firmware</h5>
            </div>
            <div id="current-analyses">
                <!-- Filled with JavaScript -->
            </div>
            <div class="form-check mt-2 mb-0">
                <input class="form-check-input" type="checkbox" value="" id="ca-show-details">
                <label class="form-check-label" for="ca-show-details">Show details</label>
            </div>
        </div>
    </div>
</div>


{% if analysis_plugin_info %}
    <div class="row justify-content-center my-3">
        <div style="width: 430px;" class="border-secondary border-top border-bottom align-middle">
            <h5 class="d-flex justify-content-center mb-0 p-2">Analysis Plugins</h5>
        </div>
    </div>
    <div class="row justify-content-center">
        {% for plugin_name in analysis_plugin_info | sort %}
            {% if plugin_name != "unpacker" %}
                {{ plugin_card(plugin_name) }}
            {% endif %}
        {% endfor %}
    </div>
{% endif %}

{% endblock %}
